<template>
  <div id="submitPic">
    <draggable element="ul" v-model="styles.imgUrl">
      <div class="submit-content" v-for="(v,i) in styles.imgUrl" :key="i">
        <div class="picture">
          <svg style="font-size:20px;margin-right:10px" class="icon" aria-hidden="true">
            <use xlink:href="#iconcaidan" />
          </svg>
          <uploadImage :v="v" :height="65"></uploadImage>
        </div>
        <div class="url">
          <div>
            <upLoadUrl :v="v" :width="350"></upLoadUrl>
          </div>
          <p>建议图片宽度750px</p>
        </div>
        <i @click="deletePic(i)" class="el-icon-error delete"></i>
      </div>
    </draggable>
    <el-button @click="addPic" size="small" style="width:100%" plain>
      <i class="el-icon-plus"></i>
      <span>添加</span>
    </el-button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import draggable from "vuedraggable";
import uploadImage from "../../components/comm/upLoadImage";
import upLoadUrl from "../../components/comm/uploadUrl";
export default {
  name: "submitPic",
  data() {
    return {};
  },
  props: ["num"],
  created(){

  },
  computed: {
    ...mapState(["list", "currentId", "currentName", "susBtn","open"]),
    styles() {
      if (this.currentId == -2) {
        return this.susBtn[0].styles;
      }else if(this.currentId == -5){
        return this.open[0].styles;
      } else {
        return this.list[this.currentId].styles;
      }
    },
  },
  components: {
    draggable,
    uploadImage,
    upLoadUrl,
  },
  methods: {
    addPic() {
      if (this.num != undefined) {
        if (this.styles.imgUrl.length >= 4) {
          this.$message.error("此元素最多允许添加四个！");
          return false;
        }
      }
      this.styles.imgUrl.push({
        img: "",
        url: "",
      });
    },
    deletePic(i) {
      if (this.styles.imgUrl.length == 1) {
        return false;
      }
      this.styles.imgUrl.splice(i, 1);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
#submitPic {
  .submit-content:hover {
    .delete {
      display: block;
    }
  }
  .submit-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f7f7f7;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 4px;
    .picture {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 10px;
    }
    .url {
      font-size: 14;
      > p {
        margin-top: 5px;
        font-size: 10px;
        color: #939799;
      }
    }
    .delete {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      display: none;
    }
  }
}
</style>
